<template>
  <div class="detail_con">
    <div class="self_info">
      <div class="info_line info_all">
        <div class="grid_info">
          <div class="left">录入日期：</div>
          <div class="right">{{ formData.createTime }}</div>
        </div>
      </div>
      <div class="info_line info_all">
        <div class="grid_info">
          <div class="left">录入部门：</div>
          <div class="right">{{ formData.orgName }}</div>
        </div>
      </div>
      <div class="info_line info_all">
        <div class="grid_info">
          <div class="left">姓名：</div>
          <div class="right">{{ formData.userName }}</div>
        </div>
      </div>
      <div class="info_line">
        <div class="grid_info info_cell">
          <div class="left">会议类型：</div>
          <div class="right cell_li">
            <van-radio-group v-model="formData.meetingType" direction="horizontal" disabled>
              <van-radio name="1">内部会议</van-radio>
              <van-radio name="2">外部会议</van-radio>
            </van-radio-group>
          </div>
        </div>
      </div>
      <div class="info_line">
        <div class="grid_info">
          <div class="left">会议主题：</div>
          <div class="right pre_line">{{ formData.meetingName }}</div>
        </div>
      </div>
      <div class="info_line">
        <div class="grid_info">
          <div class="left">会议议程：</div>
          <div class="right pre_line">{{ formData.meetingContent }}</div>
        </div>
      </div>
      <div class="info_line info_all">
        <div class="grid_info">
          <div class="left" style="width: 120px">会议开始时间：</div>
          <div class="right">{{ formData.startTime ? formData.startTime.slice(0, -3) : '' }}</div>
        </div>
      </div>
      <div class="info_line info_all">
        <div class="grid_info">
          <div class="left" style="width: 120px">会议结束时间：</div>
          <div class="right">{{ formData.endTime ? formData.endTime.slice(0, -3) : '' }}</div>
        </div>
      </div>
      <div class="info_line info_all">
        <div class="grid_info">
          <div class="left">会议地点：</div>
          <div class="right pre_line">{{ formData.meetingPlace }}</div>
        </div>
      </div>
      <div class="info_line info_all">
        <div class="grid_info">
          <div class="left">会议来源：</div>
          <div class="right pre_line">{{ formData.meetingResource }}</div>
        </div>
      </div>
      <div class="info_line">
        <div class="grid_info info_cell info_annex">
          <div class="left">会议资料：</div>
          <div class="right cell_li">
            <ImgUpload
              v-bind:albumList.sync="formData.enclosureList"
              :entry="false"
              v-if="formData.enclosureList.length" />
            <span v-else>无</span>
          </div>
        </div>
      </div>
      <div class="info_line info_all">
        <div class="grid_info">
          <div class="left">参会人员：</div>
          <div class="right">{{ attendUser }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getMeetingDetail } from '@api/api-meet.js'
import ImgUpload from '@com/ImgUpload'
import moment from 'moment'
export default {
  name: 'MeetingDetailPage',
  components: {
    ImgUpload,
  },
  data() {
    return {
      moment: moment,
      userInfo: JSON.parse(localStorage.userInfo),
      operateType: this.$route.query.operateType,
      formData: {
        id: '',
        meetingTheme: '',
        startTime: '',
        endTime: '',
        participantsList: [],
        enclosureList: [],
      },
      attendUser: '',
    }
  },
  watch: {},
  created() {
    this.getData()
  },
  mounted() {},
  destroyed() {},
  methods: {
    getData() {
      getMeetingDetail({ id: this.$route.query.id }).then(res => {
        if (res.code === 0) {
          const data = res.data
          this.formData = Object.assign(this.formData, data)
          this.formData.createTime = data.createTime
          this.formData.orgName = data.createByOrg
          this.formData.userName = data.createBy
          if (this.formData.participantsList.length) {
            const arr1 = []
            this.formData.participantsList.forEach(item => {
              arr1.push(item.userName)
            })
            this.attendUser = arr1.join(',')
          }
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.detail_con {
  padding: 3px 12px 70px;
  background-color: #f0f0f0;
  font-size: 14px;
  color: #333333;
  width: 100%;
  overflow-x: hidden;
  height: 100%;
  overflow-y: auto;
  .self_info {
    width: 100%;
    background-color: #ffffff;
    padding: 10px;
    box-shadow: 0 0 10px 0 rgba(4, 0, 0, 0.15);
    border-radius: 5px;
    margin-top: 16px;
    .title_bold {
      font-weight: 800;
      font-size: 16px;
    }
  }
  .info_line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e4e4e4;
    .grid_info {
      display: flex;
      align-items: stretch;
      padding: 7px 0;
      .left {
        display: flex;
        // align-items: center;
        margin-right: 5px;
        width: 80px;
        min-width: 80px;
        span {
          color: #d9001b;
        }
      }
    }
  }
  .info_input,
  .info_cell {
    flex: 1;
    align-items: flex-start;

    .right {
      flex: 1;
    }
    .cell_li {
      display: flex;
      align-items: center;
      .van-cell__value {
        text-align: right;
      }
      /deep/.up_box {
        flex: 1;
      }
      /deep/.up_box_img {
        padding-top: 0;
        padding-bottom: 0;
      }
    }
  }
  .info_all {
    .grid_info {
      flex: 1;
      justify-content: space-between;
    }
  }
  .info_annex {
    flex-wrap: wrap;
    width: 100%;
    .cell_li {
      width: 100%;
    }
  }
}
</style>
